<template>
  <div class="bg-white-opacity rounded-xl">
    <a-descriptions
      :column="{ lg: 2, md: 2, sm: 1, xs: 1 }"
      bordered
      layout="vertical"
      size="small"
    >
      <template #extra>
        <button class="mt-4 mr-4 font-sans btn" @click="handleClick">详情</button>
      </template>
      <a-descriptions-item label="清单总价">{{ originalCost }}</a-descriptions-item>
      <a-descriptions-item label="折后价">{{ realCost }}</a-descriptions-item>
      <a-descriptions-item label="折扣">{{ discount }}</a-descriptions-item>
      <a-descriptions-item label="代销处">{{ oName }}</a-descriptions-item>
      <a-descriptions-item label="下单日期">{{ lDate }}</a-descriptions-item>
    </a-descriptions>
    <a-drawer
      width="512"
      title="订单详情"
      placement="left"
      :closable="false"
      v-model:visible="listingDetailVisible"
      :bodyStyle="bodyStyle"
    >
      <UserOrderCard class v-for="item in goodDetailList" :key="item.id" :goodDetail="item" />
    </a-drawer>
  </div>
</template>

<script lang='ts' setup>
import { defineProps, toRefs, ref } from 'vue'
import type { PropType } from 'vue'
import type { ManagerListingInfo, UserListingInfo } from '@/interface/listing'
import type { GoodDetail } from '@/interface/good'
import { queryListingDetailById } from '@/api/listing'
import UserOrderCard from './UserOrderCard.vue'
const props = defineProps({
  listingInfo: {
    type: Object as PropType<UserListingInfo | ManagerListingInfo>,
    default: () => {}
  }
})
const listingDetailVisible = ref(false)
const goodDetailList = ref<GoodDetail[]>()

console.log(props.listingInfo);
const { realCost, originalCost, discount, lDate, lId,oName } = toRefs(props.listingInfo)
const bodyStyle = {
  display: 'flex',
  flexDirection: 'column',
  gap: '32px'
}
const handleClick = async () => {
  const { data: { data } } = await queryListingDetailById(lId.value)
  goodDetailList.value = data
  listingDetailVisible.value = true
}
</script>
<style scoped>
.btn {
  @apply w-16 h-10 font-mono bg-gray-300 rounded transform focus:ring-4 focus:ring-gray-500 focus:ring-opacity-50 focus:outline-none hover:scale-110 hover:opacity-100 opacity-90;
  @apply transition-transform duration-200 ease-out;
}
</style>